<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("用户名") }}：</p>
        <el-input
          v-model="username"
          :placeholder="$t('请输入用户名')"
        ></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("会员号") }}：</p>
        <el-input
          v-model="member_id"
          :placeholder="$t('请输入会员号')"
        ></el-input>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("客户端") }}：</p>
        <el-select
          v-model="clientVal"
          :placeholder="$t('请选择')"
          @change="clientChange"
        >
          <el-option
            v-for="item in clientArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("手机号") }}：</p>
        <el-input
          v-model="mobile"
          :placeholder="$t('请输入手机号')"
        ></el-input>
      </div>
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="getData('search')"
      >
        {{ $t("提交") }}
      </button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column
          prop="id"
          :label="$t('用户ID')"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="member_id"
          :label="$t('会员号')"
          width="90"
        ></el-table-column>
       
        <el-table-column prop="avatar" :label="$t('头像')">
          <template slot-scope="{ row }">
            <img class="avatar" :src="row.avatar" />
          </template>
        </el-table-column>

        <el-table-column prop="nick" :label="$t('用户名称')"></el-table-column>
        <el-table-column prop="gender" :label="$t('性别')"></el-table-column>
        <el-table-column prop="app_type" :label="$t('客户端')">
          <template slot-scope="{ row }">
            <span v-if="row.app_type == 1">{{ $t("微信小程序") }}</span>
            <span v-if="row.app_type == 2">{{ $t("支付宝小程序") }}</span>
            <span v-if="row.app_type == 3">APP</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balance"
          :label="$t('账户余额')"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          :label="$t('手机号')"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          :label="$t('创建时间')"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="last_login"
          :label="$t('最后使用')"
          width="180"
        ></el-table-column>
        <el-table-column :label="$t('操作')" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="userDetail(scope.row)"
              v-if="permissions.indexOf('/customer/detail') != -1"
              >{{ $t("详情") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 用户详情 -->
    <el-dialog
      :title="$t('用户详情')"
      width="900px"
      :visible.sync="showUserDetail"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("用户名") }}：</span>
          <span class="txt font14 text_black">{{ details.name }}</span>
        </div>
        <div class="img_list u-f">
          <span class="lable font14 text_black">{{ $t("用户头像") }}：</span>
          <img class="img" :src="details.avatar" />
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("注册时间") }}：</span>
          <span class="txt font14 text_black">{{ details.create_time }}</span>
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("上次登录") }}：</span>
          <span class="txt font14 text_black">{{ details.last_login }}</span>
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("订单数量") }}：</span>
          <span class="txt font14 text_black">{{ details.order_num }}</span>
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("进行中订单") }}：</span>
          <span class="txt font14 text_black">{{ details.order_active }}</span>
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("超时订单") }}：</span>
          <span class="txt font14 text_black">{{ details.order_overdue }}</span>
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("共充值") }}：</span>
          <span class="txt font14 text_black"
            >{{ details.recharge }}{{ $t("元") }}</span
          >
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("已退款") }}：</span>
          <span class="txt font14 text_black"
            >{{ details.refund }}{{ $t("元") }}</span
          >
        </div>
        <div class="txt_list">
          <span class="lable font14 text_black">{{ $t("押金") }}：</span>
          <span class="txt font14 text_black"
            >{{ details.deposit }}{{ $t("元") }}</span
          >
          <el-button
            type="primary"
            @click="redeposit"
            v-if="permissions.indexOf('/customer/redeposit') != -1"
            >{{ $t("退回余额") }}</el-button
          >
        </div>
        <div class="ipt_list">
          <span class="lable font14 text_danger">{{ $t("余额") }}：</span>
          <span class="txt font14 text_danger"
            >{{ details.balance }}{{ $t("元") }}</span
          >
          <el-button
            type="primary"
            @click="rebalance"
            v-if="permissions.indexOf('/customer/rebalance') != -1"
            >{{ $t("退款") }}</el-button
          >
        </div>
      </div>
    </el-dialog>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "customer-index",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      username: "",
      member_id: "",
      mobile: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("选择客户端"),
        },
        {
          value: 1,
          label: that.$t("微信小程序"),
        },
        {
          value: 2,
          label: that.$t("支付宝小程序"),
        },
      ],
      tableData: [],
      showUserDetail: false,
      details: {
        id: "",
        name: "",
        avatar: "",
        create_time: "",
        last_login: "",
        order_num: "",
        order_active: "",
        order_overdue: "",
        recharge: "",
        refund: "",
        deposit: "",
        balance: "",
      },
    };
  },
  computed: {
    ...mapState(["permissions"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1;
      this.page_size = 20;
      this.username = "";
      this.member_id = "";
      this.mobile = "";
      this.clientVal = 0;
      this.getData();
    },
    getData(type) {
      if (type == "search") {
        this.page = 1;
      }
      util
        .$http("/customer/index?page=" + this.page, {
          page_size: this.page_size,
          name: this.username,
          member_id: this.member_id,
          mobile: this.mobile,
          type: this.clientVal,
        })
        .then((res) => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    clientChange(val) {
      this.clientVal = val;
    },
    userDetail(row) {
      this.showUserDetail = true;
      setTimeout(() => {
        util
        .$http("/customer/detail", {
          id: row.id,
        })
        .then((res) => {
          if (res.code == 1) {
            this.details = {
              id: res.data.id,
              name: res.data.nick,
              avatar: res.data.avatar,
              create_time: res.data.create_time,
              last_login: res.data.last_login,
              order_num: res.data.order_num,
              order_active: res.data.order_active,
              order_overdue: res.data.order_overdue,
              recharge: res.data.recharge,
              refund: res.data.refund,
              deposit: res.data.deposit,
              balance: res.data.balance,
            };
          }
        });
      }, 150);
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    redeposit() {
      this.$confirm(this.$t("是否要退回余额"))
        .then(() => {
          util
            .$http("/customer/redeposit", {
              id: this.details.id,
            })
            .then((res) => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    rebalance() {
      this.$confirm(this.$t("是否要退款"))
        .then(() => {
          util
            .$http("/customer/rebalance", {
              id: this.details.id,
            })
            .then((res) => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.avatar {
  width: 40px;
  height: 40px;
}
.order_detail {
  padding: 0 0 50px 20px;
  margin-top: -15px;
}
.order_detail .txt_list {
  margin-bottom: 15px;
}
.order_detail .txt_list .el-button {
  margin-left: 25px;
}
.order_detail .img_list {
  margin-bottom: 15px;
}
.order_detail .img_list .img {
  width: 100px;
  height: 100px;
}
.order_detail .ipt_list .el-button {
  margin-left: 25px;
}
</style>
